
 <!-- Modal content-->
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title">请选择数据类型</h3>
    </div>
    <div class="modal-body">
        <div class="ibox animated fadeInUp">
            <div class="ibox-title">
                <div class="ibox-tools rboor">
                    <a class="btn btn-primary btn-sm" id="batch-add-apppage-rectpl-asset" href="javascript:void(0);">
                        <i class="im-plus">
                        </i>
                        批量选择数据
                    </a>
                    <button class="btn btn-success btn-sm" href="javascript:void(0);" id="apppage-rectpl-asset-table-refresh">
                        <i class="im-spinner10 fa-spin">
                        </i>
                        刷新
                    </button>
                </div>
            </div>
            <div class="ibox-content" style="background-color: #ffffff;color: inherit;padding: 15px 20px 20px 20px;border-color: #e7eaec;border-image: none;border-style: solid solid none;border-width: 1px 0px;">
                <!-- search start -->
                <div class="form-horizontal clearfix">

                    <div class="col-lg-3 col-sm-2 pl0">
                        <div class="form-group">
                            <label class="col-lg-4 col-sm-4 control-label">
                                选择数据类型：
                            </label>
                            <div class="col-lg-8 col-sm-7">
                                <select class="input-sm form-control input-s-sm inline" id="data_type">
                                     @foreach ($datas as $data)
                                    <option value="{{$data['id']}}">{{$data['title']}}</option>
                                    @endforeach

                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-4">
                        <div class="form-group">
                            <div class="col-lg-12 col-sm-12 input-group">
                                <input class="input-sm form-control" placeholder="请输入关键字" type="text" id="column-recommend-search-value">
                                    <span class="input-group-btn">
                                        <button class="btn btn-sm btn-primary" type="button" id="apppage-rectpl-asset-search">
                                            搜索
                                        </button>
                                    </span>
                                </input>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="_token" value="{{csrf_token()}}"/>
                </div>
                <!-- search end -->
                <!-- 表格-媒资数据 -->
                <table cellspacing="0" class="table table-striped table-bordered table-hover dataTables-example dataTable" id="apppage-rectpl-asset-table" width="100%"></table>
            </div>
        </div>
    </div>

    <script>

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
                // 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        var apppage_rectpl_area_id = '{{$apppage_rectpl_area_id}}';
        /**
         * 媒资
         */
        // 媒资-datatables渲染
        subcolumnAssetTable = $('#apppage-rectpl-asset-table').DataTable({
            // "processing": true,
            // 服务器端渲染
            "serverSide": true,
            "retrieve": true,
            // 请求数据的形式(get, post), 请求的路径
            ajax: {
                url: "/admin/recommend/apppage_rectpl_areas/rectpl_datas/datas",
                type: "POST",
                cache: false,
                async:true,
                data: function(d) {
                    // 搜索框
                    d.search_value = $('#column-recommend-search-value').val();
                    // 数据来源
                    d.data_type = $('#data_type').val();
                    d.apppage_rectpl_area_id = apppage_rectpl_area_id;
                },
                // headers: {
                //     'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                // }
            },
            columns: [{
                orderable: false,
                data: "id",
                render: function(id) {
                    return '<input type="checkbox" data-id="' + id + '" name="checkbox-apppage-rectpl-asset">'
                },
                title: '<input id="apppage-rectpl-asset-check-all" name="" type="checkbox" value=""/>全选',
                width: "5%"
            }, {
                // 列名
                title: "数据ID",
                // 数据
                data: "id",
                // 能否进行排序
                orderable: true,
                width: "10%"
            }, {
                title: "名称",
                data: "name",
                orderable: true,
                width: "10%"
            }, {
                title: "标题",
                data: "title",
                orderable: true,
                width: "10%"
            }],
            // 分页类型
            "pagingType": "full_numbers",
            "sLoadingRecords": "正在加载数据...",
            "sZeroRecords": "暂无数据",
            // 能否进行搜索
            "searching": false,
            "order": [
                [1, "asc"]
            ],
            "dom": 'rt<"bottom"iflp<"clear">>',
            "language": {
                "processing": "玩命加载中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "url": "",
                "paginate": {
                    "first": "首页",
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "末页"
                }
            },
            _fnPageChange: function() {}
        });
        // 使用col插件实现表格头宽度拖拽
        // $("#apppage-rectpl-asset-table").colResizable();
        // 全选
        $('#apppage-rectpl-asset-check-all').on('click', function() {
            $('#apppage-rectpl-asset-table tr input[type="checkbox"][name="checkbox-apppage-rectpl-asset"]').each(function() {
                if ($(this).is(':checked')) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }
            });
            // if($(this).is(':checked')) {
            //     console.log("选中");
            //     // alert("选中");
            // } else {
            //     console.log("取消选中");
            //     // alert("取消");
            // }
        });
        // 批量添加媒资
        $('#batch-add-apppage-rectpl-asset').on('click', function() {

            var data_id = [];
            $('#apppage-rectpl-asset-table tr input[type="checkbox"][name="checkbox-apppage-rectpl-asset"]').each(function() {
                if ($(this).is(':checked')) {
                    data_id.push($(this).attr("data-id"));
                }
            });
            console.log(data_id);
            console.log(apppage_rectpl_area_id);
            // console.log();
            var data_type = $('#data_type').val();
            if (data_id.length < 1) {
                layer.msg("数据不能为空, 请勾选数据!", {
                    icon: 5
                });
                return false;
            }
            // 发送请求
            $.ajax({
                url: '/admin/recommend/apppage_rectpl_areas/rectpl_datas/datas/store',
                type: 'POST',
                cache: false,
                dataType: 'json',
                data: {
                    data_id: data_id,
                    apppage_rectpl_area_id: apppage_rectpl_area_id,
                    data_type: data_type,
                },
                success: function(data) {
                    if (data.status) {
                        layer.alert(data.content, {
                            icon: 6
                        });
                        subcolumnAssetTable.draw();
                        if(typeof(subcolumnAssetSelectedTable)=='object'){
                            subcolumnAssetSelectedTable.draw();
                        }
                    } else {
                        layer.msg(data.content, {
                            icon: 5
                        });
                    }
                },
                error: function() {
                    layer.msg("异常！");
                }
            });
        });
        // 搜索过滤
        $('#apppage-rectpl-asset-search').on('click', function() {
            subcolumnAssetTable.draw();
        });
        // 刷新
        $('#apppage-rectpl-asset-table-refresh').on('click', function() {
            subcolumnAssetTable.ajax.reload(null, false);
        });

    </script>
